<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> 
<%
	String path = request.getScheme() + "://" + request.getServerName()
			+ ":" + request.getServerPort() + request.getContextPath();
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>${farm.farmInfoName}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="shortcut icon" href="<%=path%>/resources/images/log.png">
    <link rel="stylesheet" href="<%=path%>/resources/js/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=path%>/resources/css/base.css">
    <link rel="stylesheet" href="<%=path%>/resources/css/phone.css">
    <link href="<%=path%>/resources/css/lanrenzhijia.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="<%=path%>/resources/dist/photoswipe.css">
		<link rel="stylesheet" href="<%=path%>/resources/dist/default-skin/default-skin.css">
    <script src="<%=path%>/resources/dist/photoswipe.min.js"></script>
		<script src="<%=path%>/resources/dist/photoswipe-ui-default.min.js"></script>
    <script src="<%=path%>/resources/js/jquery-1.9.1.js" type="text/javascript"></script>
    <script src="<%=path%>/resources/js/jquery.min.js" type="text/javascript"></script>
    <script src="<%=path%>/resources/js/jquery.imgbox.pack.js" type="text/javascript"></script>
    <!--<script src="<%=path%>/resources/js/bootstrap/bootstrap.min.js" type="text/javascript"></script>-->
   <!-- <script>
        $(function() {
            $(".example2").imgbox({
                'speedIn' : 0,
                'speedOut' : 0,
                'alignment' : 'center',
                'overlayShow' : true,
                'allowMultiple' : false
            });
        });
    </script> -->
    <style>

        .col-xs-2 {
            width: 18.666667%;
        }
        a {
            text-decoration: none;
        }
        .dephoto a {
            margin-right: 3px;
        }
        body {
            color: #666
        }
        .img-rounded {
            width: 70px;
            height: 70px;
        }
        .col-xs-2 {
            text-align: center;
            margin-top: 3%;
        }
        .col-xs-3 {
            text-align: center;
            margin-top: 3%;
        }
        .col-xs-9 {
            margin-top: 10px;
        }
        .pdleft{
        	padding-left: 0px;
        }
        a.demo-gallery__img--main.col-xs-4 {
		    margin-bottom: 10px;
		}
    </style>
</head>
<body>
    <div class="farm_meun gz_show" style="border-bottom:1px solid #ccc;">
	    <div class="toptitle">
	        <h1>农场环境</h1>
	    </div>
	    <img src="<%=path%>/resources/images/top-l.jpg" style="position: absolute; top: 0; left: 0; z-index: -1;" />
	    <img src="<%=path%>/resources/images/top-r.jpg" style="position: absolute; top: 0; right: 0; z-index: -1;" />
	</div>
    <div class="container demo-gallery" id="demo-test-gallery">
        <div class="row">
            <div class="col-xs-2 " style="width: 25%;margin-left: -15px;">
               
                <span class="year" style="font-size: 1.8rem; margin-top: 10px;">
                <input type="hidden" id="year" value="<fmt:formatDate value="${farmEnvir.farmAlbumCreationdate }" pattern="yyyy年MM月dd日 "/>">
                </span>
                <span class="date" >
                
                
                </span>
            </div>
            <div class="col-xs-9" style="margin-left: -10px">
                <span style="font-size: 16px;">${farmEnvir.farmAlbumIntro }</span>
            </div>
            <div class="col-xs-1"></div>
        </div>
        <div class="row">
            <div class="col-xs-2"></div>
               <div class="col-xs-9 pdleft">
               		<c:if test="${farmEnvir.farmAlbumImage1!= 'null'}">
	                    <a href="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage1}" data-med="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage1}" data-size="1600x1400" data-med-size="1024x683" data-author="Folkert Gorter" class="demo-gallery__img--main col-xs-4">
							<img class="img-rounded" src="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage1}" >
						</a>
					</c:if>
						<c:if test="${farmEnvir.farmAlbumImage2!= 'null'}">
						 <a href="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage2}" data-med="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage2}"  data-size="1600x1400"   data-med-size="1024x683" data-author="Folkert Gorter" class="demo-gallery__img--main col-xs-4">
							<img class="img-rounded" src="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage2}" >
						</a>
					</c:if>
					<c:if test="${farmEnvir.farmAlbumImage3!= 'null'}">
						<a href="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage3}" data-med="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage3}" data-size="1600x1400" data-med-size="1024x683"   data-author="Folkert Gorter" class="demo-gallery__img--main col-xs-4">
							<img class="img-rounded" src="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage3}" >
						</a>
					</c:if>
					<c:if test="${farmEnvir.farmAlbumImage4!= 'null'}">
						<a href="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage4}" data-med="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage4}" data-size="1600x1400" data-med-size="1024x683"   data-author="Folkert Gorter" class="demo-gallery__img--main col-xs-4">
							<img class="img-rounded" src="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage4}" >
						</a>
					</c:if>
						<c:if test="${farmEnvir.farmAlbumImage5!= 'null'}">
						<a href="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage5}" data-med="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage5}" data-size="1600x1400" data-med-size="1024x683"   data-author="Folkert Gorter" class="demo-gallery__img--main col-xs-4">
							<img class="img-rounded" src="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage5}" >
						</a>
					</c:if>
						<c:if test="${farmEnvir.farmAlbumImage6!= 'null'}">
						<a href="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage6}" data-med="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage6}" data-size="1600x1400" data-med-size="1024x683"   data-author="Folkert Gorter" class="demo-gallery__img--main col-xs-4">
							<img class="img-rounded" src="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage6}" >
						</a>
					</c:if>
						<c:if test="${farmEnvir.farmAlbumImage7!= 'null'}">
						<a href="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage7}" data-med="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage7}" data-size="1600x1400" data-med-size="1024x683"   data-author="Folkert Gorter" class="demo-gallery__img--main col-xs-4">
							<img class="img-rounded" src="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage7}" >
						</a>
					</c:if>
						<c:if test="${farmEnvir.farmAlbumImage8!= 'null'}">
						<a href="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage8}" data-med="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage8}" data-size="1600x1400" data-med-size="1024x683"   data-author="Folkert Gorter" class="demo-gallery__img--main col-xs-4">
							<img class="img-rounded" src="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage8}" >
						</a>
					</c:if>
						<c:if test="${farmEnvir.farmAlbumImage9!= 'null'}">
						<a href="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage9}" data-med="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage9}" data-size="1600x1400" data-med-size="1024x683"   data-author="Folkert Gorter" class="demo-gallery__img--main col-xs-4">
							<img class="img-rounded" src="http://ll.sharestar.cn/image/${farmEnvir.farmAlbumImage9}" >
						</a>
					</c:if>
               </div>
            
        </div>
      </div>
        <div class="pos">
            <hr>
        </div>
        <br />
        <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
			<div class="pswp__bg"></div>
			<div class="pswp__scroll-wrap">
				<div class="pswp__container">
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
					<div class="pswp__item"></div>
				</div>
				<div class="pswp__ui pswp__ui--hidden">
					<div class="pswp__top-bar">
						<div class="pswp__counter"></div>
						<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
						<!-- <button class="pswp__button pswp__button--share" title="Share"></button> -->
						<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
						<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
						<div class="pswp__preloader">
							<div class="pswp__preloader__icn">
								<div class="pswp__preloader__cut">
									<div class="pswp__preloader__donut"></div>
								</div>
							</div>
						</div>
					</div>
					<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
						<div class="pswp__share-tooltip"></div>
					</div>
					<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </button>
					<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </button>
					<div class="pswp__caption">
						<div class="pswp__caption__center"></div>
					</div>
				</div>
			</div>
		</div>
        <!--<p class="f35">对不起，没有找到该更多信息...</p>-->
    </div>
    <script type="text/javascript">
    $(function(){
    	var fullDate = $("#year").val();
    	var year = fullDate.substring(2, 4);
    	var month = fullDate.substring(5, 7);
    	 $("span.year").text(year);
    	 if (month == 1) {
 			$('.date').text("一月");
 		};

 		if (month == 2) {
 			$('.date').html("二月");
 		};
 		if (month == 3) {
 			$('.date').text("三月");
 		}
 		if (month == 4) {
 			$('.date').text("四月");
 		}
 		if (month == 5) {
 			$('.date').text("五月");
 		}
 		if (month == 6) {
 			$('.date').text("六月");
 		}
 		if (month == 7) {
 			$('.date').text("七月");
 		}
 		if (month == 8) {
 			$('.date').text("八月");
 		}
 		if (month == 9) {
 			$('.date').text("九月");
 		}
 		if (month == 10) {
 			$('.date').text("十月");
 		}
 		if (month == 11) {
 			$('.date').text("十一月");
 		}
 		if (month == 12) {
 			$('.date').text("十二月");

 		}
    	
    });
    </script>
    <!--图片浏览-->
		<script>
			(function() {
				var initPhotoSwipeFromDOM = function(gallerySelector) {
					var parseThumbnailElements = function(el) {
						var thumbElements = el.childNodes, 
							numNodes = thumbElements.length,
							items = [],
							el,
							childElements,
							thumbnailEl,
							size,
							item;
						for(var i = 0; i < numNodes; i++) {
							el = thumbElements[i];
							// include only element nodes
							if(el.nodeType !== 1) {
								continue;
							}
							childElements = el.children;
							size = el.getAttribute('data-size').split('x');
							// create slide object
							item = {
								src: el.getAttribute('href'),
								w: parseInt(size[0], 10),
								h: parseInt(size[1], 10),
								author: el.getAttribute('data-author')
							};
							item.el = el; // save link to element for getThumbBoundsFn
							if(childElements.length > 0) {
								item.msrc = childElements[0].getAttribute('src'); // thumbnail url
								if(childElements.length > 1) {
									item.title = childElements[1].innerHTML; // caption (contents of figure)
								}
							}
							var mediumSrc = el.getAttribute('data-med');
							if(mediumSrc) {
								size = el.getAttribute('data-med-size').split('x');
								// "medium-sized" image
								item.m = {
									src: mediumSrc,
									w: parseInt(size[0], 10),
									h: parseInt(size[1], 10)
								};
							}
							// original image
							item.o = {
								src: item.src,
								w: item.w,
								h: item.h
							};
							items.push(item);
						}
						return items;
					};
					// find nearest parent element
					var closest = function closest(el, fn) {
						return el && (fn(el) ? el : closest(el.parentNode, fn));
					};
					var onThumbnailsClick = function(e) {
						e = e || window.event;
						e.preventDefault ? e.preventDefault() : e.returnValue = false;

						var eTarget = e.target || e.srcElement;

						var clickedListItem = closest(eTarget, function(el) {
							return el.tagName === 'A';
						});

						if(!clickedListItem) {
							return;
						}

						var clickedGallery = clickedListItem.parentNode;

						var childNodes = clickedListItem.parentNode.childNodes,
							numChildNodes = childNodes.length,
							nodeIndex = 0,
							index;

						for(var i = 0; i < numChildNodes; i++) {
							if(childNodes[i].nodeType !== 1) {
								continue;
							}

							if(childNodes[i] === clickedListItem) {
								index = nodeIndex;
								break;
							}
							nodeIndex++;
						}

						if(index >= 0) {
							openPhotoSwipe(index, clickedGallery);
						}
						return false;
					};

					var photoswipeParseHash = function() {
						var hash = window.location.hash.substring(1),
							params = {};

						if(hash.length < 5) { // pid=1
							return params;
						}

						var vars = hash.split('&');
						for(var i = 0; i < vars.length; i++) {
							if(!vars[i]) {
								continue;
							}
							var pair = vars[i].split('=');
							if(pair.length < 2) {
								continue;
							}
							params[pair[0]] = pair[1];
						}

						if(params.gid) {
							params.gid = parseInt(params.gid, 10);
						}

						return params;
					};

					var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
						var pswpElement = document.querySelectorAll('.pswp')[0],
							gallery,
							options,
							items;

						items = parseThumbnailElements(galleryElement);

						// define options (if needed)
						options = {

							galleryUID: galleryElement.getAttribute('data-pswp-uid'),

							getThumbBoundsFn: function(index) {
								// See Options->getThumbBoundsFn section of docs for more info
								var thumbnail = items[index].el.children[0],
									pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
									rect = thumbnail.getBoundingClientRect();

								return {
									x: rect.left,
									y: rect.top + pageYScroll,
									w: rect.width
								};
							},

							addCaptionHTMLFn: function(item, captionEl, isFake) {
								if(!item.title) {
									captionEl.children[0].innerText = '';
									return false;
								}
								captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';
								return true;
							}

						};

						if(fromURL) {
							if(options.galleryPIDs) {
								// parse real index when custom PIDs are used
								// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
								for(var j = 0; j < items.length; j++) {
									if(items[j].pid == index) {
										options.index = j;
										break;
									}
								}
							} else {
								options.index = parseInt(index, 10) - 1;
							}
						} else {
							options.index = parseInt(index, 10);
						}

						// exit if index not found
						if(isNaN(options.index)) {
							return;
						}

						var radios = document.getElementsByName('gallery-style');
						for(var i = 0, length = radios.length; i < length; i++) {
							if(radios[i].checked) {
								if(radios[i].id == 'radio-all-controls') {

								} else if(radios[i].id == 'radio-minimal-black') {
									options.mainClass = 'pswp--minimal--dark';
									options.barsSize = {
										top: 0,
										bottom: 0
									};
									options.captionEl = false;
									options.fullscreenEl = false;
									options.shareEl = false;
									options.bgOpacity = 0.85;
									options.tapToClose = true;
									options.tapToToggleControls = false;
								}
								break;
							}
						}

						if(disableAnimation) {
							options.showAnimationDuration = 0;
						}

						// Pass data to PhotoSwipe and initialize it
						gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);

						// see: http://photoswipe.com/documentation/responsive-images.html
						var realViewportWidth,
							useLargeImages = false,
							firstResize = true,
							imageSrcWillChange;

						gallery.listen('beforeResize', function() {

							var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
							dpiRatio = Math.min(dpiRatio, 2.5);
							realViewportWidth = gallery.viewportSize.x * dpiRatio;

							if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200) {
								if(!useLargeImages) {
									useLargeImages = true;
									imageSrcWillChange = true;
								}

							} else {
								if(useLargeImages) {
									useLargeImages = false;
									imageSrcWillChange = true;
								}
							}

							if(imageSrcWillChange && !firstResize) {
								gallery.invalidateCurrItems();
							}

							if(firstResize) {
								firstResize = false;
							}

							imageSrcWillChange = false;

						});

						gallery.listen('gettingData', function(index, item) {
							if(useLargeImages) {
								item.src = item.o.src;
								item.w = item.o.w;
								item.h = item.o.h;
							} else {
								item.src = item.m.src;
								item.w = item.m.w;
								item.h = item.m.h;
							}
						});

						gallery.init();
					};

					// select all gallery elements
					var galleryElements = document.querySelectorAll(gallerySelector);
					for(var i = 0, l = galleryElements.length; i < l; i++) {
						galleryElements[i].setAttribute('data-pswp-uid', i + 1);
						galleryElements[i].onclick = onThumbnailsClick;
					}

					// Parse URL and open gallery if it contains #&pid=3&gid=1
					var hashData = photoswipeParseHash();
					if(hashData.pid && hashData.gid) {
						openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true);
					}
				};

				initPhotoSwipeFromDOM('.demo-gallery');

			})();
		</script>
</body>
</html>